<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="../../public/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../../public/css/bootstrap-icons.css" />
        <link rel="stylesheet" href="../../public/css/theme.css" />
        <script src="../../public/js/vue/vue.global.prod.js"></script>
        <script src="../../components/icon-svg.js"></script>
        <script src="../../components/spliter.js"></script>
        <script src="../../components/lepton.js"></script>
        <style>
            body {
                background-color: #fffefa;
            }

            .title {
                margin-left: 4px;
            }

            .gap-1 {
                gap: 0.25rem;
            }

            .gap-2 {
                gap: 0.5rem;
            }

            .gap-3 {
                gap: 1rem;
            }

            .gap-4 {
                gap: 1.5rem;
            }

            .status {
                position: absolute;
                left: -1.25rem;
            }

            .server:hover {
                background-color: rgb(224, 237, 211);
            }
        </style>
    </head>
    <body class="font">
        <div id="app">
            <spliter>
                <template #left>
                    <ul class="list-group overflow-auto vh-100">
                        <li
                            class="list-group-item border-0 cursor-pointer p-1 rounded mb-1"
                            :class="{'no-theme-selected': activeIndex == index}"
                            v-for="(item,index) in connections"
                            :title="item.description"
                            @click="onClientChange(item,index)"
                            @mouseenter="item.hover = true"
                            @mouseleave="item.hover=false">
                            <div class="d-flex">
                                <div class="d-flex align-items-center flex-fill">
                                    <icon-svg name="computer" size="16px"></icon-svg>
                                    <div class="title user-select-none">{{name(item)}}</div>
                                </div>
                                <div class="d-flex gap-2">
                                    <icon-svg
                                        name="disconnect"
                                        size="16px"
                                        class="danger"
                                        v-if="item.hover && item.isConnected"
                                        @click="onDisconnect(item,index)"></icon-svg>
                                    <icon-svg
                                        v-if="item.hover && !item.undeletable"
                                        name="remove"
                                        size="16px"
                                        class="danger"
                                        v-if="item.hover"
                                        @click="onRemove(item,index)"></icon-svg>
                                    <icon-svg
                                        :name="item.isConnected?'online':'offline'"
                                        size="16px"></icon-svg>
                                </div>
                            </div>
                        </li>
                    </ul>
                </template>
                <template #right>
                    <div>
                        <ul class="nav nav-tabs">
                            <li class="nav-item" @click="tab = 'connection'">
                                <a
                                    class="nav-link py-1 px-2 cursor-pointer user-select-none"
                                    :class="{active:tab == 'connection'}">
                                    连接
                                </a>
                            </li>
                            <li class="nav-item" @click="tab = 'other'">
                                <a
                                    class="nav-link py-1 px-2 cursor-pointer user-select-none"
                                    :class="{active:tab == 'other'}">
                                    编辑器
                                </a>
                            </li>
                            <li class="nav-item" @click="tab = 'server'">
                                <a
                                    class="nav-link py-1 px-2 cursor-pointer user-select-none"
                                    :class="{active:tab == 'server'}">
                                    服务器
                                </a>
                            </li>
                        </ul>
                        <div class="d-flex flex-column" v-if="tab == 'connection'">
                            <div class="mt-2">
                                <label for="name">服务器名称</label>
                                <input
                                    type="text"
                                    v-model="form.name"
                                    class="form-control form-control-sm py-1 px-2 fs-inherit"
                                    id="name" />
                            </div>
                            <div class="d-flex gap-3">
                                <div class="mt-2 w-75">
                                    <label for="host">主机名</label>
                                    <input
                                        type="text"
                                        v-model="form.host"
                                        class="form-control form-control-sm py-1 px-2 fs-inherit"
                                        id="host" />
                                </div>
                                <div class="mt-2 w-25">
                                    <label for="port">端口号</label>
                                    <input
                                        type="text"
                                        v-model="form.port"
                                        class="form-control form-control-sm py-1 px-2 fs-inherit"
                                        id="port" />
                                </div>
                            </div>
                            <div class="mt-2">
                                <label for="username">用户名</label>
                                <input
                                    type="text"
                                    v-model="form.username"
                                    class="form-control form-control-sm py-1 px-2 fs-inherit"
                                    id="username" />
                            </div>
                            <div class="mt-3">
                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        v-model="form.method"
                                        id="key"
                                        value="key" />
                                    <label class="form-check-label" for="key">私钥登录</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        v-model="form.method"
                                        id="pwd"
                                        value="pwd" />
                                    <label class="form-check-label" for="pwd">密码登录</label>
                                </div>
                            </div>
                            <div class="mt-2" v-if="form.method == 'pwd'">
                                <label for="password" class="form-label">登陆密码</label>
                                <input
                                    type="password"
                                    class="form-control form-control-sm py-1 px-2 fs-inherit"
                                    v-model="form.password"
                                    id="password" />
                            </div>
                            <div class="mt-2" v-if="form.method == 'key'">
                                <label for="privateKeyPath">私钥文件</label>
                                <div class="input-group input-group-sm">
                                    <input
                                        type="text"
                                        v-model="form.privateKeyPath"
                                        class="form-control form-control-sm py-1 px-2 fs-inherit"
                                        id="privateKeyPath" />
                                    <span class="input-group-append">
                                        <span
                                            class="input-group-text cursor-pointer user-select-none fs-inherit"
                                            @click="onOpenFilePicker">
                                            浏览
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="mt-2" v-if="form.method == 'key'">
                                <label for="passphrase">私钥密码</label>
                                <input
                                    type="password"
                                    class="form-control form-control-sm py-1 px-2 fs-inherit"
                                    v-model="form.passphrase"
                                    id="passphrase" />
                            </div>
                        </div>
                        <div class="d-flex flex-column" v-else-if="tab == 'other'">
                            <div class="mt-2 d-flex justify-content-between">
                                <label for="enableTerminal">启用终端按钮</label>
                                <input
                                    type="checkbox"
                                    v-model="form.enableTerminal"
                                    id="enableTerminal" />
                            </div>
                            <div class="mt-2 d-flex justify-content-between">
                                <label for="enableFileExplorer">启用服务器文件管理器按钮</label>
                                <input
                                    type="checkbox"
                                    v-model="form.enableFileExplorer"
                                    id="enableFileExplorer" />
                            </div>
                            <div class="mt-2 d-flex justify-content-between">
                                <label for="enablePortForward">启用端口转发按钮</label>
                                <input
                                    type="checkbox"
                                    v-model="form.enablePortForward"
                                    id="enablePortForward" />
                            </div>
                            <div class="mt-2 d-flex justify-content-between">
                                <label for="enablePortForward">启用服务器状态监测按钮</label>
                                <input
                                    type="checkbox"
                                    v-model="form.enableStats"
                                    id="enableStats" />
                            </div>
                            <div class="mt-2 d-flex justify-content-between">
                                <label for="enableSave">保存客户端</label>
                                <input type="checkbox" v-model="form.enableSave" id="enableSave" />
                            </div>
                            <div class="mt-2 d-flex justify-content-between">
                                <label for="enableSave">显示关闭按钮</label>
                                <input
                                    type="checkbox"
                                    v-model="form.enableClose"
                                    id="enableClose" />
                            </div>
                            <div
                                class="mt-2 d-flex justify-content-between"
                                v-if="system.platform == 'win32'">
                                <label for="enableShortcut">桌面创建快捷方式</label>
                                <input
                                    type="checkbox"
                                    v-model="form.enableShortcut"
                                    id="enableShortcut" />
                            </div>
                        </div>
                        <div class="d-flex flex-column" v-else>
                            <div class="mt-2">
                                <label for="keepaliveInterval">心跳间隔</label>
                                <div class="input-group input-group-sm">
                                    <input
                                        type="text"
                                        v-model="form.keepaliveInterval"
                                        class="form-control form-control-sm py-1 px-2 fs-inherit"
                                        id="keepaliveInterval" />
                                    <span class="input-group-append">
                                        <span class="input-group-text fs-inherit">ms</span>
                                    </span>
                                </div>
                            </div>
                            <div class="mt-2">
                                <label for="defaultPath">工作目录</label>
                                <input
                                    type="text"
                                    v-model="form.defaultPath"
                                    class="form-control form-control-sm py-1 px-2 fs-inherit"
                                    id="defaultPath" />
                            </div>
                            <div class="mt-2">
                                <label for="root">服务器文件本地缓存目录</label>
                                <input
                                    type="text"
                                    v-model="form.root"
                                    class="form-control form-control-sm py-1 px-2 fs-inherit"
                                    id="root" />
                            </div>
                        </div>
                    </div>
                </template>
            </spliter>
        </div>
        <script src="../../public/icons/server-icon.js"></script>
        <script src="../../public/icons/remove-icon.js"></script>
        <script src="../../public/icons/computer-icon.js"></script>
        <script src="../../public/icons/connection-icon.js"></script>
        <script src="../../public/icons/offline-icon.js"></script>
        <script src="../../public/icons/online-icon.js"></script>
        <script src="../../public/icons/disconnect-icon.js"></script>
        <script>
            const { createApp } = Vue
            const app = createApp({
                data() {
                    return {
                        tab: 'connection',
                        params: {},
                        connections: [],
                        activeIndex: 0,
                        form: {},
                        default: {
                            name: '',
                            host: '',
                            port: 22,
                            method: 'key',
                            username: 'root',
                            password: '',
                            privateKey: '',
                            privateKeyPath: '',
                            passphrase: '',
                            defaultPath: '',
                            keepaliveInterval: 3000,
                            keepaliveCountMax: 3,
                            enableTerminal: false,
                            enableFileExplorer: true,
                            enablePortForward: false,
                            enableSave: true,
                            enableStats: true,
                            root: '',
                            enableClose: true,
                            enableShortcut: false
                        },
                        system: {
                            platform: ''
                        }
                    }
                },
                computed: {
                    selected() {
                        return this.connections[this.activeIndex]
                    }
                },
                mounted() {
                    this.initChannel()
                },
                methods: {
                    async onInit() {
                        const data = await this.onFn('onInit')
                        let clients = data.clients
                        this.system.platform = data.platform
                        this.default.root = data.root
                        this.default.privateKeyPath = data.privateKeyPath
                        if (clients && clients.length > 0) {
                            let maxIdx = 0
                            for (let i = 0; i < clients.length; i++) {
                                const item = clients[i]
                                const client = Object.assign({}, this.default, item)
                                const current = client.startConnectTime
                                const max = clients[maxIdx].startConnectTime
                                if (current && max) {
                                    if (current > max) {
                                        maxIdx = i
                                    }
                                }
                                this.connections.push(client)
                            }
                            this.onClientChange(this.connections[maxIdx], maxIdx)
                        } else {
                            this.create()
                        }
                    },
                    onButtonClick(name) {
                        switch (name) {
                            case '新建站点':
                                this.create()
                                break
                            case '连接':
                                this.onFn('onConnect', this.form)
                                break
                        }
                    },
                    onClientChange(client, index) {
                        this.activeIndex = index
                        this.form = client
                    },
                    onRemove(client, index) {
                        this.connections.splice(index, 1)
                        this.onFn('onRemove', client)
                    },
                    create() {
                        const client = Object.assign({}, this.default)
                        this.connections.push(client)
                        const idx = this.connections.length - 1
                        this.onClientChange(client, idx)
                    },
                    name(client) {
                        return client.name || client.username + '@' + client.host
                    },
                    onOpenFilePicker() {
                        this.onFn('onOpenFilePicker')
                    },
                    onOpenFilePickerResponse(data) {
                        this.form.privateKeyPath = data
                    },
                    async onDisconnect(client, index) {
                        await this.onFn('onDisconnect', client.host)
                        client.isConnected = false
                    },
                    onDisconnectResponse(host) {
                        const client = this.connections.find(it => it.host == host)
                        if (client) {
                            client.isConnected = false
                        }
                    }
                }
            })
            app.use(window.lepton)
            app.mount('#app')
        </script>
    </body>
</html>
